/* ============================================================
   样式重置
   ============================================================ */

body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,blockquote,address,pre{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,input,textarea,select,button,label{font-size:100%;vertical-align:middle;}
ul,dl,ol{list-style:none;}
img,fieldset{border:none;}
img{display:inline-block;overflow:hidden;vertical-align:top;}
em,address{font-style:normal;}
sup,sub{vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
q:before{content:"";}
q:after{content:"";}
button{cursor:pointer;}
textarea{word-wrap:break-word;resize:none;}

/* ============================================================
   页面
   ============================================================ */


.charector{
position: relative;
width: 180px;
height: 300px;
background: url(../images/charector.png) 0 0 no-repeat;
/*-webkit-animation-name: charector-1;*//* 动画名称 */
-webkit-animation-iteration-count: infinite;/* 动画无限播放 */
-webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */
-webkit-animation-duration: 950ms;/* 动画运行的时间 */
    z-index: 1000;
}

@-webkit-keyframes charector-1{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
}


html, body {
    width: 100%;
    height: 100%;
}

small {
    margin: 0 10px 30px;
    display: block;
    font-size: 12px
}

a {
    margin: 0 0 0 10px;
    font-size: 12px;
    color: #3c3c3c
}

img {
    border: 0
}

ol, ul, li {
    list-style-type: none
}

#content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    /*position: absolute*/
}

.content-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%
}

.content-wrap > li {
    width: 100%;
    height: 100%;
    float: left;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative
}

.slowWalk {
    -webkit-animation-name: person-slow;
    -webkit-animation-duration: 950ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(1, start)
}

.slowFlolerWalk {
    -webkit-animation-name: person-floler-slow;
    -webkit-animation-duration: 950ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
    -moz-animation-name: person-floler-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: step-start
}

.pauseWalk {
    -webkit-animation-play-state: paused
}

.boyOriginal {
    background-position: -150px -0px
}

.button {
    position: absolute;
    top: 82%
}

button {
    width: 80px;
    height: 50px
}


/*=============*/
.a_background {
    width: 100%;
    height: 100%;
    position: absolute
}

.a_background_top {
    width: 100%;
    height: 71.6%;
    background-image: url("../images/back1.jpg");
    background-size: 100% 100%
}

.a_background_middle {
    width: 100%;
    height: 13.1%;
    background-image: url("../images/55addf800001ff2e14410118.png");
    background-size: 100% 100%
}

.a_background_botton {
    width: 100%;
    height: 15.3%;
    background-image: url("../images/55addfcb000189b314410138.png");
    background-size: 100% 100%
}


/*=============*/
.layerB {
    position: relative
}

.b_background {
    width: 100%;
    height: 100%;
    background-image: url("../images/back2.jpg");
    background-size: 100% 100%;
    position: absolute
}

.b_background_preload {
    background: url("../images/back2.jpg") no-repeat -9999px -9999px
}

.shop {
    width: 39.5%;
    height: 35.5%;
    position: absolute;
    left: 29%;
    top: 36.5%
}

.door {
    position: absolute;
    width: 32%;
    height: 100%;
    top: 32%;
    height: 68%;
    overflow: hidden;
    left: 58.5%
}

.door-left, .door-right {
    width: 50%;
    height: 100%;
    position: absolute
}

.door-left {
    left: 0;
    background: url(../images/55ade1140001050d00910231.png);
    background-size: 100% 100%
}

.door-right {
    left: 50%;
    background: url(../images/55ade12100019f5b00910231.png);
    background-size: 100% 100%
}

.bird {
    min-width: 91px;
    min-height: 71px;
    top: 10%;
    position: absolute;
    z-index: 10;
    right: -91px;
    background: url(../images/55ade1700001b38302730071.png) -182px 0 no-repeat
}

.birdFly {
    -webkit-animation-name: bird-slow;
    -webkit-animation-duration: 400ms;
    -webkit-animation-timing-function: step-start;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: bird-slow;
    -moz-animation-duration: 400ms;
    -moz-animation-timing-function: step-start;
    -moz-animation-iteration-count: infinite
}

@-webkit-keyframes bird-slow {
    0% {
        background-position: -182px 0
    }
    50% {
        background-position: 0 0
    }
    75% {
        background-position: -91px 0
    }
    100% {
        background-position: -182px 0
    }
}

@-moz-keyframes bird-slow {
    0% {
        background-position: -182px 0
    }
    50% {
        background-position: 0 0
    }
    75% {
        background-position: -91px 0
    }
    100% {
        background-position: -182px 0
    }
}



/*=============*/
.c_background {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    position: absolute
}

.c_background_top {
    width: 100%;
    height: 71.6%;
    background-image: url("../images/back3.jpg");
    background-size: 100% 100%
}

.c_background_middle {
    width: 100%;
    height: 13.1%;
    background-image: url("../images/55ade1b3000135c114410118.png");
    background-size: 100% 100%
}

.c_background_botton {
    width: 100%;
    height: 15.3%;
    background-image: url("../images/55ade1c30001db5d14410138.png");
    background-size: 100% 100%
}

.bridge-bottom {
    position: absolute;
    width: 41%;
    height: 24%;
    left: 29.5%;
    top: 76%;
    overflow: hidden
}